<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head th:replace="/common/include :: header(~{::title}, ~{::link}, ~{::style})">
    <title>DEMO-表单-表单向导</title>
    <link th:href="@{/lib/steps/jquery.steps.css}" rel="stylesheet" type="text/css"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-5">
            <div class="jumbotron">
                <h1>表单向导</h1>
                <p>Smart UI 部件允许您快速创建表单向导接口。</p>
                <p>
                    <a href="https://github.com/rstaib/jquery-steps" target="_blank" class="btn btn-success btn-lg"
                      role="button">了解 jQuery Steps</a>
                </p>
            </div>
        </div>
        <div class="col-sm-7">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>基础表单向导</h5>
                </div>
                <div class="ibox-content">
                    <p>
                        这是一个简单的表单向导示例
                    </p>
                    <div id="wizard">
                        <h1>第一步</h1>
                        <div class="step-content">
                            <div class="text-center m-t-md">
                                <h2>第一步</h2>
                                <p>
                                    这是第一步的内容
                                </p>
                            </div>
                        </div>

                        <h1>第二步</h1>
                        <div class="step-content">
                            <div class="text-center m-t-md">
                                <h2>第二步</h2>
                                <p>
                                    这是第二步的内容
                                </p>
                            </div>
                        </div>

                        <h1>第三步</h1>
                        <div class="step-content">
                            <div class="text-center m-t-md">
                                <h2>第三步</h2>
                                <p>
                                    这是第三步的内容
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5>带验证的表单向导</h5>
                </div>
                <div class="ibox-content">
                    <h2>
                        带验证的表单向导
                    </h2>
                    <p>
                        下面这个示例展示了如何在表单向导中使用 Bootstrap Validator 插件
                    </p>

                    <form id="form" class="wizard-big">

                        <h1>账户</h1>
                        <fieldset>
                            <h2>账户信息</h2>
                            <div class="row">
                                <div class="col-sm-8">
                                    <div class="form-group">
                                        <label>用户名 *</label>
                                        <input id="userName" name="userName" type="text" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <label>密码 *</label>
                                        <input id="password" name="password" type="password" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <label>确认密码 *</label>
                                        <input id="confirm" name="confirm" type="password" class="form-control required">
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="text-center">
                                        <div style="margin-top: 20px">
                                            <i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <h1>个人资料</h1>
                        <fieldset>
                            <h2>个人资料信息</h2>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>手机 *</label>
                                        <input id="mobile" name="mobile" type="text" class="form-control required">
                                    </div>
                                    <div class="form-group">
                                        <label>传真</label>
                                        <input id="fax" name="fax" type="text" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>Email *</label>
                                        <input id="email" name="email" type="text" class="form-control required email">
                                    </div>
                                    <div class="form-group">
                                        <label>地址 *</label>
                                        <input id="address" name="address" type="text" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <h1>额外信息</h1>
                        <fieldset>
                            <h2>个人额外信息</h2>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>年龄 *</label>
                                        <input id="age" name="age" type="number" class="form-control">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label>身份证</label>
                                        <input id="id" name="id" type="number" class="form-control">
                                    </div>
                                </div>
                            </div>
                        </fieldset>

                        <h1>完成</h1>
                        <fieldset>
                            <h2>条款</h2>
                            <input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
                            <label for="acceptTerms">我同意注册条款</label>
                        </fieldset>

                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

<div th:replace="/common/include :: footer"></div>
<div th:replace="/common/include :: stepsJs"></div>
<div th:replace="/common/include :: validatorJs"></div>

<script th:inline="javascript">
    var bootstrapValidator;
    var option_step_1 = {
        fields: {
            userName: {
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    },
                    regexp: {
                        regexp: '^([\u4e00-\u9fa5]|[a-zA-Z0-9])([\u4e00-\u9fa5]|[a-zA-Z0-9_\\.]){2,9}$',
                            message: '只能输入3-10个中文、英文、数字或下划线字符'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: '密码不能为空'
                    },
                    regexp: {
                        regexp: '^[a-zA-Z][a-zA-Z0-9!@#$~]{5,17}$',
                        message: '密码要求以字母开头，长度6-18'
                    },
                    identical: {
                        field: 'confirm',
                        message: '与确认新密码不一致'
                    }
                }
            }
        }
    };
    var option_step_2 = {
        fields: {
            mobile: {
                validators: {
                    notEmpty: {
                        message: '手机号不能为空'
                    },
                    regexp: {
                        regexp: '^((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))\\d{8}$',
                        message: '手机号格式不正确'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱不能为空'
                    },
                    emailAddress: {
                        message: '邮箱格式不正确'
                    }
                }
            }
        }
    };

    $(function () {
        $('#wizard').steps();

        var option = {
            container: 'tooltip',
            feedbackIcons: {
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            live: 'enabled',
            excluded: [':disabled', ':hidden', ':not(:visible)', '.excluded'],
            submitButtons: '.form-submit'
        };

        $('#form').steps({
            bodyTag: 'fieldset', onStepChanging: function (event, currentIndex, newIndex) {
                if (bootstrapValidator) {
                    $('#form').data('bootstrapValidator').destroy();
                    $('#form').data('bootstrapValidator', null);
                    bootstrapValidator = null;
                }

                if (currentIndex == 1) {
                    option.fields = option_step_1;
                } else if (currentIndex == 2) {
                    option.fields = option_step_2;
                }

                if (currentIndex > newIndex) {
                    return true
                }
                if (newIndex === 3 && Number($('#age').val()) < 18) {
                    return false
                }

                bootstrapValidator = $('#form').bootstrapValidator(option);
                return validate();
            }, onStepChanged: function (event, currentIndex, priorIndex) {
                if (currentIndex === 2 && Number($('#age').val()) >= 18) {
                    $(this).steps('next')
                }
                if (currentIndex === 2 && priorIndex === 3) {
                    $(this).steps('previous')
                }
            }, onFinishing: function (event, currentIndex) {
                return validate();
            }, onFinished: function (event, currentIndex) {
                console.log('可以提交了...');
            }
        });
    });

    function validate() {
        var bootstrapValidator = $('#form').data('bootstrapValidator');
        bootstrapValidator.validate();
        return bootstrapValidator.isValid();
    }

</script>
</body>
</html>
